<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        #a1,#a2{
            border: 1px solid black;
            background-color: aliceblue;
            height: 50px;
        }
    </style>
    <script>
        // localStrage
        // 1-setItem
        // window.localStorage.setItem("username",username.value)
        // // 2-数组
        // localStorage["username"] = username.value;
        // // 3-属性
        // localStorage.username=username.value;
        function writeLS(){
            localStorage.username = user.value;
            localStorage.password = pass.value;
            $("#a1").html("数据已经保存")
        }
        function readLS(){
            let str = "用户名是："+localStorage.username+"密码是："+localStorage.password;
            $("#a1").html(str)

        }
        function clearLS(){
            localStorage.clear();
            $("#a1").html("数据已经清除")
        }
        // sessionStrage对象
        function writeSS(){
            sessionStorage.username = user.value;
            sessionStorage.password = pass.value;
            $("#a2").html("数据已经保存")
        }
        function readSS(){
            let str = "用户名是："+sessionStorage.username+"密码是："+sessionStorage.password;
            $("#a2").html(str)

        }
        function clearSS(){
            sessionStorage.clear();
            $("#a2").html("数据已经清除")
        }


        // 区别---------生命周期长度不同
        // ls = 本地一直存储，直到整个浏览器关闭 
        //ss =会话存储，到窗口关闭，记录消失



       

    </script>
</head>
<body>
    <div>
        用户名：<input type="text" id="user" value="">
        密码: <input type="password" id="pass" value="">
        <p>localStrage对象</p>
        <a href="#" onclick="writeLS()">存储</a>
        <a href="#" onclick="readLS()">读取</a>
        <a href="#" onclick="clearLS()">清空</a>
        <div id="a1"></div>

        <p>sessionStrage对象</p>
        <a href="#" onclick="writeSS()">存储</a>
        <a href="#" onclick="readSS()">读取</a>
        <a href="#" onclick="clearSS()">清空</a>
        <div id="a2"></div>

    </div>
    
</body>
</html>